﻿<template>
  <div></div>
</template>
<script>
  import { SOCKET_SERVER} from "@/config/env";
  import constants from "@/const/constants";
  import { getToken } from "../util/store";
  import { dateFormat } from "../util/date";
  import { getMyList, getFriendInfo } from "../api/msg/im";
  import { mapGetters } from "vuex";

  export default {
    name: "im",
    data() {
      return {
        layim: null,
        imInterval: null
      };
    },
    computed: {
      ...mapGetters(["permission", "userInfo"])
    },
    created() {

    },
    mounted() {
//接收打开聊天窗口方法
      this.$EventBus.$on("chat", obj => {
        this.chat(obj.userId);
      });
      //如果当前用户是客服，弹出聊天框
      if (this.userInfo.customerService == true) {
        getMyList().then(res => {
          //遍历好友信息，将头像昵称存入sessionStore
          res.data.data.friendList.forEach(item => {
            sessionStorage.setItem("friend:" + item.id, JSON.stringify(item));
          });
          //layim初始化
          this.layImInit(res.data);
        });
      }
    },
    methods: {
//登陆通知处理
      COMMAND_LOGIN_RESP(dataObj, data) {
        if (10007 == dataObj.code) {
//登陆成功;
          console.log("连接成功");
// var userCmd = "{\"cmd\":17,\"type\":\"0\",\"userid\":\""+this.userInfo.id+"\"}";
          var msgCmd =
                  '{"cmd":19,"type":"0","userId":"' + this.userInfo.id + '"}';
// constants.SOCKET.send(userCmd);//获取登录用户信息;
          constants.SOCKET.send(msgCmd); //获取用户离线消息(好友+群组);
        } else if (10008 == dataObj.code) {
//登录失败;
          this.OTHER(data);
        }
      },
//获取用户信息响应处理;
      COMMAND_GET_USER_RESP(data) {
//获取用户信息响应处理;
      },
//接收到聊天响应处理;
      COMMAND_CHAT_RESP(data) {
        var chatObj = data.data;
        var from = chatObj.from;
        if (from == this.userInfo.id) return;
        var content = chatObj.content;
        this.getUserInfo(from).then(friend => {
          this.layim.getMessage({
            username: friend.username, //消息来源用户名
            avatar: friend.avatar,
            id: from, //消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
            type: "friend", //聊天窗口来源类型，从发送消息传递的to里面获取
            content: content, //消息内容
            cid: 0, //消息id，可不传。除非你要对消息进行一些操作（如撤回）
            mine: false, //是否我发送的消息，如果为true，则会显示在右方
            fromid: from, //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
            timestamp: chatObj.createTime //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
          });
        });
      },
//处理用户同步+持久化消息
      COMMAND_GET_MESSAGE_RESP(data, msgFlag) {
        var _layim = this.layim;
        var msgObj = data.data;
        var friends = msgObj.friends;
        for (var key in friends) {
          var chatDatas = friends[key];
          for (var index in chatDatas) {
            var from_id = chatDatas[index].from;
// var createTime = new Date(chatDatas[index].createTime).Format("yyyy/MM/dd HH:mm:ss");
            var createTime = dateFormat(new Date(chatDatas[index].createTime));

            // console.log(data);
            this.getUserInfo(from_id).then(friend => {
              _layim.getMessage({
                username: friend.username, //消息来源用户名
                avatar: friend.avatar,
                id: from_id, //消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
                type: "friend", //聊天窗口来源类型，从发送消息传递的to里面获取
                content: chatDatas[index].content, //消息内容
                cid: 0, //消息id，可不传。除非你要对消息进行一些操作（如撤回）
                mine: false, //是否我发送的消息，如果为true，则会显示在右方
                fromid: from_id, //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
                timestamp: chatDatas[index].createTime //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
              });
            });
          }
        }
      },
//其它信息处理;
      OTHER(data) {
//处理数据
        console.log("其他数据格式" + data);
      },
      logout() {
        if (constants.SOCKET) {
          constants.SOCKET.close();
        }
      },
      stopHeartCheck() {
        if (this.imInterval) {
          clearInterval(this.imInterval);
        }
      },
      startHeartCheck() {
        if (this.imInterval) {
          clearInterval(this.imInterval);
        }
        this.imInterval = self.setInterval(function() {
          var heartbeatCmd = '{"cmd":13,"hbbyte":"-127"}';
          constants.SOCKET.send(heartbeatCmd);
        }, 10000);
      },
      socketInit() {
        //socket初始化
        constants.SOCKET = new WebSocket(
                SOCKET_SERVER + "?token=" + getToken()
        );
        constants.SOCKET.onopen = e => {
          this.startHeartCheck();
        };
// var socketErrorCount = 0;
        constants.SOCKET.onerror = e => {
// 连接异常，重新连接
// 重试两次后连接后，提示用户连接异常，由用户再次连接。
// socketErrorCount++;
// if(socketErrorCount<=2){
//     constants.SOCKET = new WebSocket(SOCKET_SERVER+"?token="+getToken());
// }else{
          this.$confirm(
                  "IM服务器连接异常，连接异常不能进行聊天操作。需要重试建立连接吗?",
                  {
                    confirmButtonText: "重试连接",
                    cancelButtonText: "取消",
                    type: "warning"
                  }
          )
                  .then(() => {
                    this.socketInit();
// socketErrorCount = 0;
                  })
                  .then(() => {
                    this.stopHeartCheck();
//关闭网络layim
                  });
// }
          console.log(e);
        };
        constants.SOCKET.onclose = e => {
          console.log("链接关闭");
          this.stopHeartCheck();
        };
        constants.SOCKET.onmessage = e => {
          var data = e.data;
          var dataObj = eval("(" + data + ")"); //转换为json对象
          if (dataObj.command == 11) {
//接收到聊天响应处理;
            this.COMMAND_CHAT_RESP(dataObj);
          } else if (dataObj.command == 18) {
//获取用户信息响应处理;
// this.COMMAND_GET_USER_RESP(dataObj);
          } else if (10000 == dataObj.code && dataObj.command == 12) {
//聊天发送状态;
// this.COMMAND_CHAT_RESP_SEND_STATUS(data);
          } else if (dataObj.command == 20 && dataObj.code == 10015) {
//获取消息失败，未开启持久化处理
//...
          } else if (dataObj.command == 20 && dataObj.code == 10016) {
//处理离线消息;
            var msgFlag = "离线消息";
            this.COMMAND_GET_MESSAGE_RESP(dataObj, msgFlag);
          } else if (dataObj.command == 20 && dataObj.code == 10018) {
//处理历史消息;
// var msgFlag = "历史消息";
// var msgObj = dataObj.data;
// if(msgObj){
//     this.COMMAND_GET_MESSAGE_RESP(dataObj,msgFlag);
// }else{//没有历史消息;
//     this.OTHER(data);
// }
          } else if (dataObj.command == 6) {
//登陆命令返回状态处理
            this.COMMAND_LOGIN_RESP(dataObj, data);
          } else {
// this.OTHER(data);
          }
        };
      },
      layImInit(res) {
//layim初始化
        layui.use("layim", layim => {
          this.layim = layim;
          confirm;
//基础配置
          layim.config({
            init: {
              mine: {
                username: this.userInfo.name, //我的昵称
                id: this.userInfo.id, //我的ID
                status: "online", //在线状态 online：在线、hide：隐身
                remark: "", //我的签名
                avatar: this.userInfo.avatar //我的头像
              },
              friend: [
                {
                  groupname: "好友",
                  id: 1,
                  online: 0,
                  list: res.data.friendList
                }
              ]
            },
//上传图片接口
            uploadImage: {
              url: "/res/album/im_upload", //（返回的数据格式见下文）
              type: "" //默认post
            },
            isAudio: false, //开启聊天工具栏音频
            isVideo: false, //开启聊天工具栏视频
//扩展工具栏
// ,tool: [{
//     alias: 'code'
//     ,title: '发送商品'
//     ,icon: '&#xe64e;'
// }]
            title: "消息中心", //自定义主面板最小化时的标题
            initSkin: "2.jpg", //1-5 设置初始背景
            isgroup: false, //是否开启群组
            msgbox:
                    layui.cache.dir +
                    "css/modules/layim/html/msgbox.html?token=" +
                    getToken(), //消息盒子页面地址，若不开启，剔除该项即可
            chatLog: layui.cache.dir + "css/modules/layim/html/chatlog.html" //聊天记录页面地址，若不开启，剔除该项即可
          });

//监听在线状态的切换事件
          layim.on("online", function(data) {
//console.log(data);
          });

//监听自定义工具栏点击，以添加代码为例
          layim.on("tool(code)", function(insert) {
            layer.prompt(
                    {
                      title: "插入代码",
                      formType: 2,
                      shade: 0
                    },
                    function(text, index) {
                      layer.close(index);
                      insert("[pre class=layui-code]" + text + "[/pre]"); //将内容插入到编辑器
                    }
            );
          });

//监听layim建立就绪
          layim.on("ready", function(res) {});

//监听发送消息
          layim.on("sendMessage", res => {
            var mine = res.mine;
            var To = res.to;
            var createTime = new Date().getTime();
            var content = mine.content;
            if (constants.SOCKET.readyState != 1) {
              alert("IM服务器连接异常，连接后才能正常发送消息。");
              return false;
            } else {
              var msg =
                      '{"from": "' +
                      mine.id +
                      '","to": "' +
                      To.id +
                      '","cmd":11,"createTime":' +
                      createTime +
                      ',"chatType":"2","msgType": "0","content": "' +
                      content +
                      '"}';
              constants.SOCKET.send(msg);
            }
          });

//初始化系统消息数量
          if (res.data.unreadCount && res.data.unreadCount > 0) {
            layim.msgbox(res.data.unreadCount); //模拟消息盒子有新消息，实际使用时，一般是动态获得
          }
          //初始化socket
          this.socketInit();
        });
      },
      getUserInfo(userId) {
        return new Promise((resolve, reject) => {
          var userInfo = JSON.parse(sessionStorage.getItem("friend:" + userId));
          if (!userInfo) {
            getFriendInfo(userId).then(res => {
              sessionStorage.setItem(
                      "friend:" + userId,
                      JSON.stringify(res.data.data)
              );
              userInfo = res.data.data;
              resolve(userInfo);
            });
          } else {
            resolve(userInfo);
          }
        });
      },
      chat(userId) {
        this.getUserInfo(userId).then(friend => {
          this.layim.chat({
            name: friend.username, //名称
            type: "friend", //聊天类型
            avatar: friend.avatar, //头像
            id: userId //好友id
          });
        });
      }
    }
  };

</script>
